<template>
  <div class="particles-background" ref="particlesContainer"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const particlesContainer = ref<HTMLElement>()

interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  size: number
  opacity: number
  color: string
}

let canvas: HTMLCanvasElement
let ctx: CanvasRenderingContext2D
let particles: Particle[] = []
let animationFrame: number

onMounted(() => {
  initParticles()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame)
  }
  window.removeEventListener('resize', handleResize)
})

const initParticles = () => {
  if (!particlesContainer.value) return

  console.log('初始化粒子背景...')
  
  // 创建Canvas
  canvas = document.createElement('canvas')
  ctx = canvas.getContext('2d')!
  canvas.style.position = 'fixed'
  canvas.style.top = '0'
  canvas.style.left = '0'
  canvas.style.width = '100%'
  canvas.style.height = '100%'
  canvas.style.pointerEvents = 'none'
  canvas.style.zIndex = '-1'
  
  particlesContainer.value.appendChild(canvas)
  
  handleResize()
  createParticles()
  console.log(`创建了 ${particles.length} 个粒子`)
  animate()
}

const handleResize = () => {
  if (!canvas) return
  
  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
}

const createParticles = () => {
  const particleCount = Math.min(80, Math.floor((canvas.width * canvas.height) / 12000))
  particles = []
  
  const colors = ['#00d4ff', '#39ff14', '#ff6b35', '#8b5cf6', '#f59e0b']
  
  for (let i = 0; i < particleCount; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.8,
      vy: (Math.random() - 0.5) * 0.8,
      size: Math.random() * 3 + 1,
      opacity: Math.random() * 0.4 + 0.2,
      color: colors[Math.floor(Math.random() * colors.length)]
    })
  }
}

const animate = () => {
  if (!ctx || !canvas) return
  
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  // 更新和绘制粒子
  particles.forEach((particle, index) => {
    // 更新位置
    particle.x += particle.vx
    particle.y += particle.vy
    
    // 边界检测
    if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1
    if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1
    
    // 确保粒子在画布内
    particle.x = Math.max(0, Math.min(canvas.width, particle.x))
    particle.y = Math.max(0, Math.min(canvas.height, particle.y))
    
    // 绘制粒子
    ctx.beginPath()
    ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
    ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`
    ctx.fill()
    
    // 绘制连接线
    particles.slice(index + 1).forEach(otherParticle => {
      const dx = particle.x - otherParticle.x
      const dy = particle.y - otherParticle.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      // 增加连接距离和透明度
      if (distance < 150) {
        const opacity = (150 - distance) / 150 * 0.6
        ctx.beginPath()
        ctx.moveTo(particle.x, particle.y)
        ctx.lineTo(otherParticle.x, otherParticle.y)
        
        // 根据距离和粒子颜色动态设置连接线颜色
        const mixedColor = distance < 75 ? 
          `rgba(57, 255, 20, ${opacity})` : // 近距离用绿色
          `rgba(0, 212, 255, ${opacity})`   // 远距离用蓝色
        
        ctx.strokeStyle = mixedColor
        ctx.lineWidth = distance < 75 ? 1.2 : 0.8
        ctx.stroke()
      }
    })
  })
  
  animationFrame = requestAnimationFrame(animate)
}
</script>

<style scoped>
.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
</style>